<template>
  <zeda-dialog
    v-model="visible"
    title="关联图纸"
    width="500px"
    :before-close="handleClose"
    style="margin-top: 200px"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>
    <form-button
      slot="footer"
      :loading="loading"
      :submitText="'确定'"
      @cancel="handleClose"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
// import { detail, add, edit } from "@/api/basicdata/monthlyFlowing";
import { list } from "@/api/park/bluePrint.js";
import { detail } from "@/api/park/bluePrint";

import FormButton from "@/components/FormButton";

export default {
  dicts: ["energy_type"],
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    modelObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      parkList: [],
      paperList: [],
      loading: false, // 按钮加载中判断
      paperUrl: "",
      apsForm: {
        formRef: "form",
        formData: {},
        labelWidth: "auto",
        formConfig: {
          formAttr: {
            // inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 1,
              middle: true,
            },
            rules: {
              paperId: [
                {
                  required: true,
                  message: "请选择图纸",
                  trigger: ["blur", "change"],
                },
              ],
            },
          },
          properties: {
            parkName: {
              label: "园区",
              typeName: "el-input",
              disabled: true,
              // render: (h) => {
              //   let that = this;
              //   // 数据严谨处理,处理后端数据异常情况
              //   let valNum = that.$refs?.form?.getFieldsValue().parkId;
              //   let a = [
              //     h(
              //       "el-select",
              //       {
              //         attrs: {
              //           placeholder: "请选择园区",
              //           value: valNum,
              //           clearable: true,
              //         },
              //         props: ["value"],
              //         on: {
              //           change: (value) => {
              //             that.$refs?.form?.setFieldValue("parkId", value);
              //             that.$forceUpdate();
              //           },
              //         },
              //       },
              //       [
              //         that.parkList.map((item) => {
              //           let { name, id } = item;
              //           return h("el-option", {
              //             props: {
              //               label: name,
              //               value: id,
              //               key: id,
              //             },
              //           });
              //         }),
              //       ]
              //     ),
              //   ];
              //   return h("div", a);
              // },
            },
            paperId: {
              label: "图纸",
              render: (h) => {
                let that = this;
                let arr = [...that.paperList];
                // 数据严谨处理,处理后端数据异常情况
                let valNum = that.$refs?.form?.getFieldsValue().paperId;
                let a = [
                  h(
                    "el-select",
                    {
                      attrs: {
                        placeholder: "请选择图纸",
                        value: valNum,
                        clearable: true,
                      },
                      props: ["value"],
                      on: {
                        change: (value) => {
                          that.$refs?.form?.setFieldValue("paperId", value);
                          that.$forceUpdate();
                        },
                      },
                    },
                    [
                      arr.map((item) => {
                        let { name, id } = item;
                        return h("el-option", {
                          props: {
                            label: name,
                            value: id,
                            key: id,
                          },
                        });
                      }),
                    ]
                  ),
                ];
                return h("div", a);
              },
            },
          },
        },
      },
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.getParkName();
        this.getPaperList();
        if (String(this.id).length > 0) {
          this.getInfo(this.id, 1);
        }
      }
    },
  },
  methods: {
    getInfo(id, falge) {
      detail(id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let newData = res?.data || {};
          // console.log(newData, "nnnn");
          this.paperUrl = newData?.paperUrl ?? "";
          if (falge == 1) {
            this.$refs?.form?.setFieldValue("paperId", newData.id);
          } else if (falge == 2 || falge == 3) {
            this.$nextTick(() => {
              this.$emit(
                "givePaperUrl",
                this.paperUrl,
                newData?.name ?? "",
                newData.id,
                falge
              );
              this.handleClose(true);
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    getParkName() {
      this.$nextTick(() => {
        this.$refs?.form?.setFieldValue("parkName", this.modelObj.parkName);
      });
    },
    getPaperList() {
      let query = {
        parkId: this.modelObj.parkId,
      };
      list(query)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.paperList = res?.rows ?? [];
        })
        .catch((err) => {
          // this.$message.error("系统错误,请联系管理员!错误码");
        });
    },
    submit() {
      const data = {
        ...this.$refs.form.getFieldsValue(),
      };
      this.$refs.form.validate((valid) => {
        if (valid) {
          // this.loading = true;
          // if (this.id) {
          //   this.editRequest(data);
          // } else {
          //   this.addRequest(data);
          // }
          if (this.id != data.paperId) {
            // 修改了图纸
            let text = "是否确定修改图纸，这将会导致之前配置清空！";
            this.$modal
              .confirm(text)
              .then(() => {
                this.getInfo(data.paperId, 3);
              })
              .catch(() => {
                this.$message("取消修改");
              });
          } else {
            this.getInfo(data.paperId, 2);
          }
        } else {
          return false;
        }
      });
    },
    // addRequest(data) {
    //   add(data)
    //     .then((res) => {
    //       this.loading = false;
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.$message.success("操作成功");
    //       this.handleClose(true);
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //       // this.$message.error("系统错误,请联系管理员!");
    //     });
    // },
    // editRequest(data) {
    //   edit(data)
    //     .then((res) => {
    //       this.loading = false;
    //       if (res.code === 700) {
    //         this.$message.warning(res.msg);
    //         return false;
    //       }
    //       this.$message.success("操作成功");
    //       this.handleClose(true);
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //       // this.$message.error("系统错误,请联系管理员!");
    //     });
    // },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>
